<template>
  <f7-page
    :name="name"
    @page:init="pageInit"
    @page:beforeremove="pageBeforeRemove"
    @page:afterin="onPageAfterIn"
    @page:beforeout="onPageBeforeOut"
  >
    <!-- <div class="block-title block-item-divider"></div> -->
    <div class="my-facebook-card list2">
      <div class="card-header card-header-padding">
        <div class="my-facebook-avatar">
          <img v-if="!userInfo.headimg_url" v-bind:src="portrait" width="50" height="50" />
          <img
            v-if="userInfo.headimg_url"
            v-bind:src="userInfo.headimg_url"
            width="50"
            height="50"
            :onerror="'javascript:this.src=\''+portrait+'\''"
          />
        </div>
        <div class="my-facebook-name">
          <h3 class="name" v-text="userInfo.name?userInfo.name:userInfo.nickname"></h3>
          <p class="subname">
            <span class="mobile-span" v-text="userInfo.mobile?userInfo.mobile:''"></span>
            <!-- <span>
              <f7-icon f7="star_fill" class="size-22 red-color"></f7-icon>
            </span>-->
          </p>
        </div>
      </div>
    </div>
    <div class="block-title block-item-divider"></div>
    <div class="list">
      <ul>
        <li @click="tipMyEduPage()">
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">我的课程</div>
            </div>
          </a>
        </li>
        <li @click="tipMyStoryPage()">
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">我的故事</div>
            </div>
          </a>
        </li>
        <li @click="unlogin()">
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">退出</div>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <div class="chat-setting-user-list">
      <div
        class="chat-setting-user-item"
        :class="el.openid ? '' : 'huise'"
        v-for="(el,i) in listArr"
        :key="el.id+'hz'"
        @click="showHz(el)"
      >
        <div class="img-div">
          <img :src="el.url" alt="徽章" :onerror="'javascript:this.src=\'' + portraitLogo +'\''" />
        </div>
        <div class="tacenter text-ellipsis" v-text="el.title"></div>
      </div>
    </div>
  </f7-page>
</template>

<script>
import Storage from "../../mod/storage";
import StringUtils from "../../js/mod.string";
import ListNull from "../components/null-list.vue";
import Log from "../../mod/log.js";
import strings from "../../assets/strings";
import cordova from "../../js/cordova-app";
import Utils from "../../js/mod.utils";
import String from "../../js/mod.string";
import Http from "../../js/mod.http";
import ConstantUtils from "../../js/vue.constant";

import AlertUtils from "../../mod/utils.alert";

const name = strings.page.land.list;
const log = new Log(name);

export default {
  components: {
    ListNull,
  },
  data() {
    return {
      preloader: true,
      loading: true,
      page: 1,
      totalPage: 0,
      pageSize: 100,
      listArr: [],
      name: name,
      portrait: "./static/images/person.png",
      portraitLogo: "./static/images/logo.png",
      userInfo: {},
    };
  },
  methods: {
    pageInit(event, pageData) {
      let _this = this;
      _this.getUserInfo();
      _this.getHuiZhangList();
    },
    pageBeforeRemove(event, pageData) {
      let _this = this;
    },
    onPageAfterIn() {
      let _this = this;
      Utils.setTitle(_this, "个人中心");
      Utils.setBack(_this, function (e) {
        _this.onBack();
      });
      // cordova.addAndroidHook(_this);
    },
    onPageBeforeOut() {
      let _this = this;
      // cordova.removeAndroidHook(_this);
    },
    getUserInfo() {
      let _this = this;
      let _successUser = function (res) {
        let curResData = res.data ? res.data : [];
        _this.userInfo = curResData;
      };
      let data = {
        openid: _this.$f7.data.openid,
      };
      let params = {
        url: Http.kInterfacePath.user.query,
        data: data,
        success: _successUser,
      };
      Http.ajax(_this, params);
    },

    tipMyEduPage(item) {
      let _this = this;
      Utils.load(_this, "/my-edu-list/", {}, {});
    },
    tipMyStoryPage() {
      let _this = this;
      Utils.load(_this, "/story-list/", {}, {});
    },
    unlogin(item) {
      let _this = this;
      AlertUtils.alert.show(
        AlertUtils.param.alert({
          title: "确定退出登录？",
          buttons: [
            {
              text: "取消",
              onClick() {
              },
            },
            {
              text: "确定",
              onClick() {
                localStorage.removeItem("mobile");
                window.location.href = "./index.html?data=data";
              },
            },
          ],
        })
      );
    },

    getHuiZhangList() {
      let _this = this;
      let _successFun = function (res) {
        let curResData = res.data ? res.data : [];
        _this.listArr = curResData;
      };
      let data = {
        openid: _this.$f7.data.openid,
      };
      let params = {
        url: Http.kInterfacePath.badge.listAll,
        data: data,
        warn_error: "获取课程徽章失败！",
        success: _successFun,
      };
      Http.ajax(_this, params);
    },
    showHz: function (el) {
      let _this = this;
      var title = el.title;
      var content = el.content;
      AlertUtils.alert.show(
        AlertUtils.param.alert({
          title: title,
          content: content,
          buttons: [
            {
              onClick() {},
            },
          ],
        })
      );
    },

    onBack() {
      let _this = this;
      _this.$f7router.back();
    },
    onResume() {
      log.w("onResume");
    },
    onPause() {
      log.w("onPause");
    },
  },
};
</script>

<style scoped>
.huise {
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: gray; /*ie9- */
}

.chat-setting-user-list {
  width: 100%;
  height: auto;
  position: relative;
  padding: 5px;
  display: inline-block;
}
.chat-setting-user-item {
  margin-top: 12px;
  float: left;
  width: 100px;
  height: 120px;
  text-align: center;
}
.chat-setting-user-item .img-div {
  width: 100px;
  height: 100px;
  text-align: center;
}
.chat-setting-user-item img {
  width: 80px;
  height: 100px;
}

.chat-setting-user-item .tacenter {
  width: 100%;
  height: 20px;
  text-align: center;
}

.my-facebook-name {
  width: calc(100% - 65px);
}

.my-facebook-name .name {
  font-size: 18px;
}

.my-facebook-name .subname {
  font-size: 14px;
}

.my-img-div {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 100%;
  /*background: #ffc107;*/
  background: #cccccc;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.card-header-padding {
  padding: 14px 16px !important;
}

.ios .my-facebook-card {
  background: #ffffff;
}

.my-facebook-card .card-header:before {
  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.12);
  display: block;
  z-index: 15;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  height: 1px;
  width: 100%;
  transform-origin: 50% 0;
  transform: scaleY(0.5);
}
.mobile-span {
  line-height: 30px;
}
</style>
